<template>
	<view class="page" :style="themeColor">
		<!---flex布局flex布局开始-->
		

		<!---flex布局flex布局结束-->
		<view class="flex benben-position-layout flex flex-wrap align-center next_flex_1"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub next_fd1_0'>
				<view class='flex flex-wrap align-center justify-center next_fd1_0_c0' @tap.stop="handleJumpDiy"
					data-type="back" data-url="1">
					<text class='fu-iconfont2  next_fd1_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
				</view>
				<view class='flex flex-wrap align-center next_fd1_0_c0'>
				</view>
			</view>
		</view>
		<view class="next_flex_0">
			<view class='next_fd0_0'>
				<view class='next_fd0_0_c0'>完善基本信息（1/2）</view>
				<view class="reject_info" v-if="type == 2">
					<text>账号审核驳回原因：</text>
					<text>{{userInfo.reject_info}}</text>
				</view>
			</view>
			
		</view>
		<!---flex布局flex布局开始-->
		<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout next_flex_2">
			<view class='flex flex-wrap align-center next_fd2_0' @tap.stop="selectDanWei">
				<text class='next_fd2_0_c0'>单位</text>
				<input class='flex-sub next_fd2_0_c1' type="text" placeholder="请选择所在单位" confirm-type="done"
					:maxlength="-1" :disabled='true' placeholder-style="color:rgba(172, 179, 185, 1);font-size:32rpx"
					v-model="danwei_name" />
				<image class='next_fd2_0_c2' mode="aspectFit" :src='STATIC_URL+"31.png"'></image>
			</view>
			<view class='flex flex-wrap align-center next_fd2_0' @tap.stop="selectBuMen">
				<text class='next_fd2_0_c0'>部门</text>
				<input class='flex-sub next_fd2_0_c1' type="text" placeholder="请选择所在部门" confirm-type="done"
					:maxlength="-1" :disabled='true' placeholder-style="color:rgba(172, 179, 185, 1);font-size:32rpx"
					v-model="bumen_name" />
				<image class='next_fd2_0_c2' mode="aspectFit" :src='STATIC_URL+"31.png"'></image>
			</view>
			<view class='flex flex-wrap align-center next_fd2_0' @tap.stop="selectBanZu">
				<text class='next_fd2_0_c0'>班组</text>
				<input class='flex-sub next_fd2_0_c1' type="text" placeholder="请选择所在班组" confirm-type="done"
					:maxlength="-1" :disabled='true' placeholder-style="color:rgba(172, 179, 185, 1);font-size:32rpx"
					v-model="banzu_name" />
				<image class='next_fd2_0_c2' mode="aspectFit" :src='STATIC_URL+"31.png"'></image>
			</view>
			<view class='flex flex-wrap align-center next_fd2_0'>
				<text class='next_fd2_0_c0'>姓名</text>
				<input class='flex-sub next_fd2_0_c1' type="text" placeholder="请输入您的姓名" confirm-type="done"
					:maxlength="10" placeholder-style="color:rgba(172, 179, 185, 1);font-size:32rpx"
					v-model="real_name" />
				<image class='next_fd2_0_c2' mode="aspectFit" :src='STATIC_URL+"74.jpg"'></image>
			</view>
		</view>

		<!---flex布局flex布局结束-->
		<view class="flex flex-direction flex-wrap align-center benben-position-layout flex next_flex_3">
			<button class='next_fd3_0' @tap.stop="nextFunc">下一步</button>

		</view>
		<view :style="{height: '88rpx'}"></view>
		<!--单位选择器开始 -->
		<benben-picker ref="benbenWritePickerCodepicker4" :visible.sync="pickerDiy1687224985189"
			:label.sync='danwei_name' :value.sync='danwei_id' :options='danwei' mode='selector'
			:mask-show='true' :timeout='true' :picker-height='88' default-type='aid'
			:default-props='{"label":"name","value":"aid"}' @change="danweiChange">
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between next_picker4_0'>
					<text @tap="$refs.benbenWritePickerCodepicker4.cancel()">取消</text>
					<text>选择单位</text>
					<text class='next_picker4_0_c2' @tap="$refs.benbenWritePickerCodepicker4.pickerConfirm()">确认</text>
				</view>
			</template>
		</benben-picker>
		<!--单位选择器结束 -->
		<!--部门选择器开始 -->
		<benben-picker ref="benbenWritePickerCodepicker5" :visible.sync="pickerDiy1687225109942"
			:label.sync='bumen_name' :value.sync='bumen_id' :options='bumen' mode='selector'
			:mask-show='true' :timeout='true' :picker-height='88' default-type='aid'
			:default-props='{"label":"name","value":"aid"}' @change="bumenChange">
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between next_picker5_0'>
					<text @tap="$refs.benbenWritePickerCodepicker5.cancel()">取消</text>
					<text>部门</text>
					<text class='next_picker5_0_c2' @tap="$refs.benbenWritePickerCodepicker5.pickerConfirm()">确认</text>
				</view>
			</template>
		</benben-picker>
		<!--部门选择器结束 -->
		<!--班组选择器开始 -->
		<benben-picker ref="benbenWritePickerCodepicker6" :visible.sync="pickerDiy1687224596186"
			:label.sync='banzu_name' :value.sync='banzu_id' :options='banzu' mode='selector'
			:mask-show='true' :timeout='true' :picker-height='88' default-type='aid'
			:default-props='{"label":"name","value":"aid"}'>
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between next_picker6_0'>
					<text @tap="$refs.benbenWritePickerCodepicker6.cancel()">取消</text>
					<text>班组</text>
					<text class='next_picker6_0_c2' @tap="$refs.benbenWritePickerCodepicker6.pickerConfirm()">确认</text>
				</view>
			</template>
		</benben-picker>
		<!--班组选择器结束 -->


	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		components: {},


		data() {
			return {
				"pickerDiy1687224596186": false,
				"pickerDiy1687225109942": false,
				"pickerDiy1687224985189": false,
				"real_name": "",
				"danwei": [],
				"danwei_name": "",
				"danwei_id": "",
				"bumen": [],
				"bumen_name": "",
				"bumen_id": "",
				"banzu": [],
				"banzu_name": "",
				"banzu_id": "",
				"level": '1',  // 1单位 2部门 3班组
				"pid": "",  // 每级的id
				"type": 1,  // 1正常注册 2审核拒绝
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
			userInfo() {
				return this.$store.state.userInfo
			}

		},
		watch: {},
		onLoad(options) {
			let {type} = options;
			if (type !== undefined) this.type = type;
			if (this.type == 2) {
				this.real_name = this.userInfo.real_name;
				this.danwei_name = this.userInfo.danwwei;
				this.danwei_id = this.userInfo.danwei_id;
				this.bumen_name = this.userInfo.bumen;
				this.bumen_id = this.userInfo.bumen_id;
				this.banzu_name = this.userInfo.group;
				this.banzu_id = this.userInfo.group_id;
			}
			this.getUnit();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 选择单位  post647af4c7c4164
			getUnit() {
				this.$api.post(global.apiUrls.post647af4c7c4164, {
					level: this.level,
					pid: this.pid
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						if (this.level == 1) {
							this.danwei = res.data.data;
						} else if (this.level == 2) {
							this.bumen = res.data.data;
						} else if (this.level == 3) {
							this.banzu = res.data.data;
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			selectDanWei() {
				this.pickerDiy1687224985189 = true;
			},
			// 选择单位
			danweiChange() {
				this.pid = this.danwei_id;
				this.level = 2;
				this.bumen_name = "";
				this.bumen_id = "";
				this.banzu_name = "";
				this.banzu_id = "";
				this.getUnit();
			},
			selectBuMen() {
				if (!this.danwei_name) {
					this.$message.info('请选择单位');
					return;
				}
				if (this.type == 2) {
					this.pid = this.danwei_id;
					this.level = 2;
					this.getUnit();
					this.pickerDiy1687225109942 = true;
				} else {
					this.pickerDiy1687225109942 = true;
				}
			},
			bumenChange() {
				this.pid = this.bumen_id;
				this.level = 3;
				this.banzu_name = "";
				this.banzu_id = "";
				this.getUnit();
			},
			selectBanZu() {
				if (!this.danwei_name) {
					this.$message.info('请选择单位');
					return;
				}
				if (!this.bumen_name) {
					this.$message.info('请选择部门');
					return;
				}
				if (this.type == 2) {
					this.pid = this.bumen_id;
					this.level = 3;
					this.getUnit();
					this.pickerDiy1687224596186 = true;
				} else {
					this.pickerDiy1687224596186 = true;
				}
			},
			//下一步
			nextFunc() {
				if (!this.danwei_name) {
					this.$message.info('请选择单位');
					return;
				}
				if (!this.bumen_name) {
					this.$message.info('请选择部门');
					return;
				}
				if (!this.banzu_name) {
					this.$message.info('请选择部门');
					return;
				}
				if (!this.real_name) {
					this.$message.info('请输入姓名');
					return;
				}
				let registerInfo = "";
				if (uni.getStorageSync('registerInfo')) {
					registerInfo = uni.getStorageSync('registerInfo');
				} else {
					registerInfo = {};
				}
				registerInfo.unitsmanager_id = this.danwei_id + ',' + this.bumen_id + ',' + this.banzu_id;
				registerInfo.real_name = this.real_name;
				uni.setStorageSync('registerInfo', registerInfo);
				uni.navigateTo({
					url: '/pages/dlzc/secondNext/secondNext?type=' + this.type
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.reject_info {
		padding: 20rpx 0;
		color: #ff0022;
	}
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: var(--benbenbgColor1);
		background-size: 100% auto !important;
	}

	.next_flex_0 {
		background: url(/static/images/13.png) no-repeat, transparent;
		height: 346rpx;
		background-size: 100% auto !important;
		padding: 88rpx 04rpx 0rpx 0rpx;
		display: flex;
		align-items: flex-end;
	}

	.next_fd0_0_c0 {
		color: #000000;
		font-size: 40rpx;
		font-weight: 500;
		line-height: 56rpx;
	}

	.next_fd0_0 {
		// margin: 150rpx 0rpx 0rpx 0rpx;
		padding: 0rpx 32rpx 48rpx 32rpx;
	}

	.next_flex_1 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
	}

	.next_fd1_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.next_fd1_0_c0 {
		width: 50rpx;
		height: 50rpx;
	}

	.next_fd1_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.next_flex_2 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.next_fd2_0_c2 {
		width: 20rpx;
		height: 14rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 0rpx 0rpx auto;
	}

	.next_fd2_0_c1 {
		margin: 0rpx 0rpx 0rpx 48rpx;
	}

	.next_fd2_0_c0 {
		color: #000000;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 45rpx;
	}

	.next_fd2_0 {
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.next_flex_3 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(48rpx + var(--window-bottom));
	}

	.next_fd3_0 {
		background: rgba(205, 150, 45, 1);
		border-radius: 64rpx 64rpx 64rpx 64rpx;
		font-size: 32rpx;
		color: #fff;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
	}

	.next_picker4_0_c2 {
		color: rgba(181, 143, 104, 1);
	}

	.next_picker4_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
	}

	.next_picker5_0_c2 {
		color: rgba(202, 176, 149, 1);
	}

	.next_picker5_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
	}

	.next_picker6_0_c2 {
		color: rgba(202, 176, 149, 1);
	}

	.next_picker6_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
	}
</style>